var baseURL = "https://res.vmallres.com/pimages"

// 获取元素
var productEl = document.querySelector(".product")
var filterResultList = [].concat(resultList)
var filterKeywords = []

// 遍历数据
function showResultList() {
    productEl.innerHTML = ""
    for (var item of filterResultList) {
        // 1.顶层的item和a
        var itemEl = document.createElement("li")
        itemEl.classList.add("item")
        var aEl = document.createElement("a")
        aEl.href = "#"
        itemEl.append(aEl)
        productEl.append(itemEl)

        // 2.添加内容
        var imgEl = document.createElement("img")
            // imgEl.src = "./img/product_01.webp"
        imgEl.src = `${baseURL}${item.photoPath}428_428_${item.photoName}`
        imgEl.classList.add("album")
        aEl.append(imgEl)

        var titleEl = document.createElement("div")
        titleEl.textContent = item.name
        titleEl.classList.add("title")
        aEl.append(titleEl)

        var discountEl = document.createElement("div")
        discountEl.textContent = item.promotionInfo
        discountEl.classList.add("discount")
        aEl.append(discountEl)

        var priceEl = document.createElement("div")
        priceEl.textContent = `¥${item.price}`
        priceEl.classList.add("price")
        aEl.append(priceEl)

        var welfareEl = document.createElement("div")
        welfareEl.classList.add("welfare")
        for (var tip of item.promoLabels) {
            var tipEl = document.createElement("span")
            tipEl.classList.add("tip")
            tipEl.textContent = tip
            welfareEl.append(tipEl)
        }
        aEl.append(welfareEl)

        var commentEl = document.createElement("div")
        commentEl.classList.add("comment")
        aEl.append(commentEl)
        var countEl = document.createElement("span")
        countEl.classList.add("count")
        countEl.textContent = `${item.rateCount}人评论`
        commentEl.append(countEl)
        var rateEl = document.createElement("span")
        rateEl.classList.add("rate")
        rateEl.textContent = `${item.goodRate}% 好评`
        commentEl.append(rateEl)
    }
    for (var i = 0; i < 3; i++) {
        var emptyLi = document.createElement("li")
        emptyLi.className = "item empty"
        productEl.append(emptyLi)
    }
}

function updateFilterResult() {
    filterResultList = resultList.filter(function(item) {
        var itemDiscounts = item.services
        var isFlag = true
        for (var keyword of filterKeywords) {
            if (!itemDiscounts.includes(keyword)) {
                isFlag = false
                break
            }
        }
        return isFlag
    })
    console.log(filterResultList)
    showResultList()
}

function sortFilterResult(sortKey) {
    if (sortKey === "default") {
        console.log("------")
        updateFilterResult()
    } else {
        filterResultList.sort(function(item1, item2) {
            return item2[sortKey] - item1[sortKey]
        })
        console.log(filterResultList, sortKey)
        showResultList()
    }
}

showResultList()

// 功能实现
var discountEl = document.querySelector(".discount")
for (var i = 1; i < discountEl.children.length; i++) {
    var itemEl = discountEl.children[i]
    itemEl.onclick = function() {
        var discountInfo = this.textContent.trim()
        this.classList.toggle("active")
        if (this.classList.contains("active")) {
            filterKeywords.push(discountInfo)
        } else {
            var keywordIndex = filterKeywords.indexOf(discountInfo)
            filterKeywords.splice(keywordIndex, 1)
        }
        updateFilterResult()
    }
}

var sortEl = document.querySelector(".sort")
var activeSortEl = sortEl.querySelector(".active")
for (var i = 1; i < sortEl.children.length; i++) {
    var sortItemEl = sortEl.children[i]
    sortItemEl.onclick = function() {
        activeSortEl.classList.remove("active")
        this.classList.add("active")
        activeSortEl = this

        sortFilterResult(this.dataset.key)
    }
}